$(function(){
// 设置默认样式

// 隐藏所有的工具类WEB
function hide(){
  $('.addvideo').css('display','none')
  $('.videoDetail').css('display','none')
  $('.checkVideo').css('display','none')
  $('.videoEdit').css('display','none')
}

// 管理员工具栏切换
// nav切换
// 高亮
$('.panel-group').on('click','a',function(){
  $('.panel-default a').css('backgroundColor','#fff')
  $('.panel-default a').css('color','#000')
  $(this).css('backgroundColor','#0082cf')
  $(this).css('color','#fff')
  
  if($(this).hasClass('icon-jiantoushang')){
    $(this).find('.iconfont').removeClass('icon-jiantoushang')
  }else{
    $('.iconfont').removeClass('icon-jiantoushang')
    $(this).find('.iconfont').addClass('icon-jiantoushang')
  }
})


// nav二级内容栏切换
$('.tool ul ').on('click','li',function(){
  hide()
  // icon()
  $('.activeli').removeClass('activeli')
  $(this).addClass('activeli')
  $(this).find('.icon-xiangxia').toggleClass('icon-jiantoushang')
  $("."+$(this).attr('id')).css('display','block')
})


// 上传视频按钮
$('.addvideoBtn').on('click',upvideo)

// 视频封面图片预览
$('.addvideoForm .videoImg').on('change',function(){
  var blob = window.URL.createObjectURL( $('.addvideoForm .videoImg')[0].files[0])
  $('.addvideoForm .videoImgbox').css("backgroundImage","url("+blob+")")
})


// 管理员上传视频
function upvideo(){
  const userId = nowuser.uid
  const formdata = new FormData()
  const videoTitle = $('.videoTitle').val()
  const videoIntro = $('.videoIntro').val()
  const videoTime = $('.videoTime').val()
  const videoImg = $('.videoImg')[0].files[0]
  const videoMold = $('.videoMold').val()
  const upTime = $('.upTime').val()
  if(!videoTitle || !videoIntro || !videoTime || !videoImg || !videoMold){
    alert('内容不能为空！')
    return
  }
  formdata.append('videoTitle',videoTitle)
  formdata.append('videoIntro',videoIntro)
  formdata.append('videoTime',videoTime)
  formdata.append('videoMold',videoMold)
  formdata.append('upTime',upTime)
  formdata.append('userId',userId)
  formdata.append('videoImg',videoImg)
  axios({
    url: 'uploads',
    method: 'POST',
    headers: {
      "Content-Type":"multipart/form-data",
    },
    data: formdata
  }).then(res =>{
      $('.videoImgbox').css('backgroundImage','url("../img/mikufun/icon_add_img.png")')
      $('.addvideoForm')[0].reset()
      resSuccess('上传成功')
  }).catch(error =>{
    console.log(res)
    $('.addvideoForm')[0].reset()
    resError('上传失败')
  })
}

// 为上传续集查找相关视频
$('.detailsearchformBtn').on('click',function(){
  $('.tablehead').siblings().remove()
  const videoTitle = $('.detailsearch').val()
  if(!videoTitle){
    return
  }
  $('.detailsearchform')[0].reset()
  axios({
    url:'getVideo/'+videoTitle,
    method:'GET',
  }).then(res=>{
    const data = res.data.data
    let list=''
    for(let i=0;i<data.length;i++){
      list +=
      ` <tr>
          <td>${data[i].videoId}</td>
          <td>${data[i].videoTitle}</td>          
          <td><img src="${data[i].videoUrl}"></td>
          <td>${data[i].videoIntro}</td>
          <td>${data[i].videoMold}</td>
          <td>${data[i].upTime}</td>
          <td><span data-toggle="modal" data-target="#myModal" data-vid=${data[i].videoId} data-title=${data[i].videoTitle} class="selectvideo">选择该视频</span></td>
        </tr> `
    }
    $('.tablehead').after(list)
  }).catch(error=>{
    console.log(error)
  })
})

$('.videoSearch').on('click','.selectvideo',function(){
  $('.showUpDetail').attr('data-vid',$(this).attr('data-vid'))
  $('.modal-title').html($(this).attr('data-title'))
})
//上传续集按钮
$('.updetailbtn').on('click',function(){
  const vid= $('.showUpDetail').attr('data-vid')
  updetail(vid)
})

//上传续集
function updetail(vid){
  const formdata = new FormData()
  const detailTitle = $('.detailTitle').val()
  const detailNum = $('.detailNum').val()
  const detailImg = $('.detailImg')[0].files[0]
  const detailVideo = $('.detailVideo')[0].files[0]
  const checkStatus = 1
  const videoUid =vid
  const needVip = $('.needVip').val()
  formdata.append('detailTitle',detailTitle)
  formdata.append('detailNum',detailNum)
  formdata.append('detailImg',detailImg)
  formdata.append('detailVideo',detailVideo)
  formdata.append('checkStatus',checkStatus)
  formdata.append('videoUid',videoUid)
  formdata.append('needVip',needVip)
  console.log(formdata)
  // if(!detailTitle || !detailNum || !detailImg || !detailVideo || !checkStatus || !videoUid){
  //   alert('内容不能为空！')
  //   return
  // }
  $('#myModal').modal('hide')
  axios({
    url:'loadDetail',
    method:'POST',
    data:formdata,
  }).then(res =>{
    resSuccess('上传成功')
  }).catch(error =>{
    resError('上传失败')
  })
}
// 封面图片预览
$('#myModal .detailImg').on('change',function(){
  $('.detailImgBox .iconfont').css('opacity','0')
  var blob = window.URL.createObjectURL( $('.detailImg')[0].files[0])
  $('#myModal .detailImgBox').css("backgroundImage","url("+blob+")")
})
// 续集预览
$('#myModal .detailVideo').on('change',function(e){
  const fileReader = new FileReader()
  fileReader.readAsDataURL(e.target.files[0])
  fileReader.onload = (e) => {
  $('#myModal .detailVideoBox video')[0].src = e.target.result
 }
})

// 续集表单重置按钮
function detailFormRest(){
  $('.detailImgBox').css('backgroundImage','url("../img/mikufun/icon_add_img.png")')
  $('#myModal .detailVideoBox video')[0].src =" "
  $('.detailform')[0].reset()
}

$('.close').on('click',function(){
  detailFormRest()
 })
$('.resetBtn').on('click',function(){
 detailFormRest()
})
$('#myModal').on('hidden.bs.modal',function(){
  detailFormRest()
})


// 视频审核
//待审核视频数据请求
let pageMax = 0
function getCheckVideo(){
  $('.checkTablehead').siblings().remove()
  $('.checkPagetion').siblings().remove()
  axios({
  url:'static/getCheckVideo',
  method:'GET'
  }).then(res=>{
      console.log(res)
      let listPage=''
      for(let i=0;i<res.data.data.countPage;i++){
        if(i==0){
          listPage +=
          `
            <li class="active pageli" data-page=${i+1}>
              <span>${i+1}<span class="sr-only">(current)</span></span>
            </li>
          `
          pageMax++
        }else{
          listPage +=
          `
            <li class="pageli" data-page=${i+1}>
              <span>${i+1}<span class="sr-only">(current)</span></span>
            </li>
          `
          pageMax++
        }
        
      }
      listPage +=
      `
        <li class="next">
          <span><span aria-hidden="true">&rarr;</span></span>
        </li>
      `
      $('.checkPagetion').after(listPage)
      const data = res.data.data.checkList
      if(data.length ==0){
        return
      }
      let list=''
      for(let i=0;i<data.length;i++){
        list +=
        ` <tr>
            <td>${data[i].videoId}</td>
            <td>${data[i].videoTitle}</td>          
            <td>${data[i].videoIntro}</td>
            <td>${data[i].videoTime}</td>
            <td><img src="${data[i].detail.detailImg}"></td>
            <td>
                <video src="${data[i].detail.detailUrl }"></video>
            </td>
            <td>
              <span data-toggle="modal" data-target="#myCheckModal" 
              data-vid=${data[i].videoId} 
              data-title=${data[i].videoTitle} 
              data-intro=${data[i].videoIntro}
              data-img=${data[i].detail.detailImg}
              data-video=${data[i].detail.detailUrl}
              class="checkThisVideo">审核该视频</span>
            </td>
            </tr> `
      }
        $('.checkTablehead').after(list)
    }).catch(error=>{
      resError('服务器异常')
    })
}


// 审核不通过
function NOdetailFormRest(){
  $('.detailImgBox').css('backgroundImage','url("../img/mikufun/icon_add_img.png")')
  $('.detailVideoBox video')[0].src =" "
  $('.checkInfoform')[0].reset()
}
$('.close').on('click',function(){
  NOdetailFormRest()
 })
$('.NOCheckBtn').on('click',function(){
  NOdetailFormRest()
})
$('#myCheckModal').on('hidden.bs.modal',function(){
  NOdetailFormRest()
})


// 选择审核的视频
let checkVid = 0
$('.checkSearch').on('click','.checkThisVideo',function(){
  const vid= $(this).attr('data-vid')
  $('.checktitle').val($(this).attr('data-title'))
  $('.checkIntro').val($(this).attr('data-intro'))
  let url = $(this).attr('data-img')
  $('.detailImgBox').css('backgroundImage',`url("${url}")`)
  $('.detailVideoBox video').attr('src',($(this).attr('data-video')))
  checkVid = vid
})

$('.checkbtn').on('click',function(){
  checkVideo(checkVid)
})

function checkVideo(vid){
  console.log(1111111)
  let videoId = vid
  console.log(videoId)
  axios({
    url:'updataCheck/'+videoId,
    method:'PUT',
    params:{
      videoId:videoId
    }
  }).then(res=>{
    getCheckVideo()
  })
}

// 分页器请求视频
function getPaging(page){
  $('.checkTablehead').siblings().remove()
  axios({
  url:'getPaging',
  method:'GET',
  params:{
    page:page
  }
  }).then(res=>{
    const data = res.data.data
    if(data.length ==0){
      return
    }
    let list=''
    for(let i=0;i<data.length;i++){
      list +=
      ` <tr>
          <td>${data[i].videoId}</td>
          <td>${data[i].videoTitle}</td>          
          <td>${data[i].videoIntro}</td>
          <td>${data[i].videoTime}</td>
          <td><img src="${data[i].detail.detailImg}"></td>
          <td>
              <video src="${data[i].detail.detailUrl }"</video>
          </td>
          <td>
            <span data-toggle="modal" data-target="#myCheckModal" 
            data-vid=${data[i].videoId} 
            data-title=${data[i].videoTitle} 
            data-intro=${data[i].videoIntro}
            data-img=${data[i].detail.detailImg}
            data-video=${data[i].detail.detailUrl}
            class="checkThisVideo">审核该视频</span>
          </td>
          </tr> `
    }
      $('.checkTablehead').after(list)
  }).catch(error=>{
    resError('服务器异常')
  })

}

let pageNow =1
//分页器前进后退
$('.checkpageBox').on('click','.previous',function(){
  $('.pagination .disabled').removeClass('disabled')
  if(pageNow==1){
    $('.checkpageBox .previous').addClass('previous')
    return
  }
  var pagepre =$('.checkpageBox .active').prev()
  $('.checkpageBox .active').removeClass('active')
  pagepre.addClass('active')
  pageNow--
  getPaging(pageNow)
})
$('.checkpageBox').on('click','.next',function(){
  $('.pagination .disabled').removeClass('disabled')
  if(pageNow==pageMax){
    $('.checkpageBox .next').addClass('previous')
    return
  }
  var pagenext =$('.checkpageBox .active').next()
  $('.checkpageBox .active').removeClass('active')
  pagenext.addClass('active')
  pageNow++
  getPaging(pageNow)
})

// 分页器切换
$('.pagination').on('click','.pageli',function(){
  $('.pagination .active').removeClass('active')
  $('.pagination .disabled').removeClass('disabled')
  $(this).addClass('active')
  let page = $(this).attr('data-page')
  pageNow = page
  if(page==1){
    $('.previous').addClass('previous')
  }
  if(page== pageMax){
    $('.next').addClass('previous')
  }
  getPaging(page)
})

// 待审核视频搜索
$('.checksearchformBtn').on('click',function(){
  $('.checkTablehead').siblings().remove()
  const videoTitle = $('.checksearchinput').val()
  if(!videoTitle){
    return
  }
  $('.checksearchform')[0].reset()
  axios({
    url:'getSearchChick/'+videoTitle,
    method:'GET',
  }).then(res=>{
    console.log(res)
    let listPage=''
    for(let i=0;i<res.data.data.countPage;i++){
      if(i==0){
        listPage +=
        `
          <li class="active pageli" data-page=${i+1}>
            <span>${i+1}<span class="sr-only">(current)</span></span>
          </li>
        `
        pageMax++
      }else{
        listPage +=
        `
          <li class="pageli" data-page=${i+1}>
            <span>${i+1}<span class="sr-only">(current)</span></span>
          </li>
        `
        pageMax++
      }
      
    }
    listPage +=
    `
      <li class="next">
        <span><span aria-hidden="true">&rarr;</span></span>
      </li>
    `
    $('.checkPagetion').after(listPage)
    const data = res.data.data.checkList
    if(data.length ==0){
      return
    }
    let list=''
    for(let i=0;i<data.length;i++){
      list +=
      ` <tr>
          <td>${data[i].videoId}</td>
          <td>${data[i].videoTitle}</td>          
          <td>${data[i].videoIntro}</td>
          <td>${data[i].videoTime}</td>
          <td><img src="${data[i].detail.detailImg}"></td>
          <td>
              <video src="${data[i].detail.detailUrl }"></video>
          </td>
          <td>
            <span data-toggle="modal" data-target="#myCheckModal" 
            data-vid=${data[i].videoId} 
            data-title=${data[i].videoTitle} 
            data-intro=${data[i].videoIntro}
            data-img=${data[i].detail.detailImg}
            data-video=${data[i].detail.detailUrl}
            class="checkThisVideo">审核该视频</span>
          </td>
          </tr> `
    }
      $('.checkTablehead').after(list)
  }).catch(error=>{
    resError('服务器异常')
  })
})
getCheckVideo()

//视频编辑
//视频信息获取
let pageMaxEdit
function editVideo(){
  $('.editPagetion').siblings().remove()
  $('.editTablehead').siblings().remove()
  axios({
    url:'getVideoInfoByEdit',
    method:'GET'
  }).then(res=>{
    console.log(res)
    let listPage=''
    for(let i=0;i<res.data.data.countPage;i++){
      if(i==0){
        listPage +=
        `
          <li class="active pageliedit" data-page=${i+1}>
            <span>${i+1}<span class="sr-only">(current)</span></span>
          </li>
        `
        pageMaxEdit++
      }else{
        listPage +=
        `
          <li class="pageliedit" data-page=${i+1}>
            <span>${i+1}<span class="sr-only">(current)</span></span>
          </li>
        `
        pageMaxEdit++
      }
      
    }
    listPage +=
    `
      <li class="next">
        <span><span aria-hidden="true">&rarr;</span></span>
      </li>
    `
    $('.editPagetion').after(listPage)
    const data = res.data.data.videos
    if(data.length ==0){
      return
    }
    let list=''
    console.log(data)
    let time
    for(let i=0;i<data.length;i++){
      time = data[i].videoTime.split(" ")[0]
      list +=
      ` <tr>
          <td>${data[i].videoTitle}</td>
          <td>${data[i].videoIntro}</td>          
          <td>${time}</td>
          <td><img src="${data[i].videoUrl}"></td>
          <td>${data[i].videoMold}</td>
          <td>${data[i].upTime}</td>
          <td>
            <span data-toggle="modal" 
            data-target="#editModal" class="upEditBtn"
            data-id=${data[i].videoId}
            data-title=${data[i].videoTitle} 
            data-intro=${data[i].videoIntro}
            data-time=${data[i].videoTime}
            data-img=${data[i].videoUrl}
            data-mold=${data[i].videoMold}
            data-up=${data[i].upTime}>修改</span>
            <span data-toggle="modal" class="editDelete" data-id=${data[i].videoId}>删除</span>
          </td>
        </tr> `
     }
    $('.editTablehead').after(list)
  })
}

// 分页器请求视频
function getPagingEdit(page){
  $('.editTablehead').siblings().remove()
  axios({
  url:'getPagingEdit',
  method:'GET',
  params:{
    page:page
  }
  }).then(res=>{
    const data = res.data.data
    if(data.length ==0){
      return
    }
    let time
    let list
    for(let i=0;i<data.length;i++){
      time = data[i].videoTime.split(" ")[0]
      list +=
      ` <tr>
          <td>${data[i].videoTitle}</td>
          <td>${data[i].videoIntro}</td>          
          <td>${time}</td>
          <td><img src="${data[i].videoUrl}"></td>
          <td>${data[i].videoMold}</td>
          <td>${data[i].upTime}</td>
          <td>
            <span data-toggle="modal" 
            data-target="#editModal" class="upEditBtn"
            data-id=${data[i].videoId}
            data-title=${data[i].videoTitle} 
            data-intro=${data[i].videoIntro}
            data-time=${data[i].videoTime}
            data-img=${data[i].videoUrl}
            data-mold=${data[i].videoMold}
            data-up=${data[i].upTime}>修改</span>
            <span data-toggle="modal" class="editDelete" data-id=${data[i].videoId}>删除</span>
          </td>
        </tr> `
     }
    $('.editTablehead').after(list)
  })
}


let pageeditNow =1
//分页器前进后退
$('.editPageBox').on('click','.previous',function(){
  $('.editPageBox .disabled').removeClass('disabled')
  if(pageeditNow==1){
    $('.editPageBox .previous').addClass('previous')
    return
  }
  var pagepre =$('.editPageBox .active').prev()
  $('.editPageBox .active').removeClass('active')
  pagepre.addClass('active')
  pageeditNow--
  getPagingEdit(pageeditNow)
})
$('.editPageBox').on('click','.next',function(){
  $('.editPageBox .disabled').removeClass('disabled')
  if(pageeditNow==pageMaxEdit){
    $('.editPageBox .next').addClass('previous')
    return
  }
  var pagenext =$('.editPageBox .active').next()
  $('.editPageBox .active').removeClass('active')
  pagenext.addClass('active')
  pageeditNow++
  getPagingEdit(pageeditNow)
})

// 分页器切换
$('.editPageBox').on('click','.pageliedit',function(){
  $('.editPageBox .active').removeClass('active')
  $('.editPageBox .disabled').removeClass('disabled')
  $(this).addClass('active')
  let page = $(this).attr('data-page')
  pageeditNow = page
  if(page==1){
    $('.editPageBox .previous').addClass('previous')
  }
  if(page== pageMaxEdit){
    $('.editPageBox .next').addClass('previous')
  }
  getPagingEdit(page)
})

// 视频删除
$('.editSearch').on('click','.editDelete',function(){
  let videoId = $(this).attr('data-id')
  console.log(videoId)
  if(confirm("您确定要删除吗?")){
    axios({
      url:'deleteVideoEdit/'+videoId,
      method:'DELETE',
      params:{
        videoId:videoId
      }
    }).then(res=>{
      getPagingEdit(pageeditNow)
      if(res.data.data.code==210){
        resSuccess("删除成功")
      }
     
    })
  }
})

//视频信息修改
//模态框信息预览
$('.editSearch').on('click','.upEditBtn',function(){
  $('.editForm .videoTitle' ).attr('data-id',$(this).attr('data-id'))
  $('.editForm .videoTitle' ).val($(this).attr('data-title'))
  $('.editForm .videoIntro' ).val($(this).attr('data-intro'))
  $('.editForm .videoTime' ).val($(this).attr('data-time'))
  let url =$(this).attr('data-img')
  $('.editForm .videoImgbox' ).css('backgroundImage',`url("${url}")`)
  $('.editForm .videoMold' ).val($(this).attr('data-mold'))
  $('.editForm .upTime' ).val($(this).attr('data-up'))
})
// 视频封面图片预览
$('#editModal .editForm .videoImg').on('change',function(){
  var blobe = window.URL.createObjectURL( $('.editForm .videoImg')[0].files[0])
  $('#editModal .editForm .videoImgbox').css("backgroundImage","url("+blobe+")")
})


//确定修改
$('.upVideoEditBtn').on('click',function(){
  const userId = nowuser.uid
  const formdata = new FormData()
  const videoId= $('.editForm .videoTitle' ).attr('data-id')
  const videoTitle = $('.editForm .videoTitle' ).val()
  const videoIntro = $('.editForm .videoIntro' ).val()
  const videoTime = $('.editForm .videoTime' ).val()
  const videoImg = $('.editForm .videoImg')[0].files[0]
  const videoMold = $('.editForm .videoMold' ).val()
  const upTime = $('.editForm .upTime' ).val()
  if(!videoTitle || !videoIntro || !videoTime  || !videoMold){
    resError('内容不能为空！')
    return
  }
  formdata.append('videoId',videoId)
  formdata.append('videoTitle',videoTitle)
  formdata.append('videoIntro',videoIntro)
  formdata.append('videoTime',videoTime)
  formdata.append('videoMold',videoMold)
  formdata.append('upTime',upTime)
  formdata.append('userId',userId)
  formdata.append('videoImg',videoImg)
  axios({
    url: 'upVideoInfo',
    method: 'POST',
    headers: {
      "Content-Type":"multipart/form-data",
    },
    data: formdata
  }).then(res =>{
      $('.editForm .videoImgbox').css('backgroundImage','url("../img/mikufun/icon_add_img.png")')
      $('.editForm')[0].reset()
      resSuccess('更新成功')
      getPagingEdit(pageeditNow)
  }).catch(error =>{
    console.log(res)
    $('.editForm .editForm')[0].reset()
    resError('更新失败')
  })
})



editVideo()
})


